<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学生列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="js/layui/css/layui.css"  media="all">
</head>
<body style="padding: 50px">
<blockquote class="layui-elem-quote" style="text-align: center;">
    学生列表
</blockquote>
<!--搜索框+添加学生-->
<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">学生姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="stu_name" placeholder="请输入" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search-stu-submit">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
        </div>

        <a class="layui-btn" id="add" style="float:right">添加学生</a>
    </div>
</div>
<!--数据列表-->
<table class="layui-hide" id="stu-table" lay-filter="stu-table"></table>
<script type="text/html" id="stu-toolbar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>

<!--添加弹出层-->
<div id="add-stu-layer" style="display: none;padding: 20px">
    <form id="add-stu-form" class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">学生姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input" lay-verify="required" autocomplete="off" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生年龄</label>
            <div class="layui-input-block">
                <input type="number" name="age" class="layui-input" lay-verify="required" autocomplete="off" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i>男</div>
                <input type="radio" name="sex" value="0" title="女"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>女</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生专业</label>
            <div class="layui-input-block">
                <select name="major" lay-verify="required">
                    <option value="" disabled selected>==请选择==</option>
                    <option value="软件工程">软件工程</option>
                    <option value="网络工程">网络工程</option>
                    <option value="信息工程">信息工程</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="add-stu-form-submit">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<!--编辑弹出层-->
<div id="update-stu-layer" style="display: none;padding: 20px">
    <form id="update-stu-form" class="layui-form layui-form-pane" lay-filter="update-stu-form">
        <input type="hidden" name="UUID" />
        <div class="layui-form-item">
            <label class="layui-form-label">学生姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input" lay-verify="required" autocomplete="off" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生年龄</label>
            <div class="layui-input-block">
                <input type="number" name="age" class="layui-input" lay-verify="required" autocomplete="off" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i>男</div>
                <input type="radio" name="sex" value="0" title="女"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>女</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生专业</label>
            <div class="layui-input-block">
                <select name="major" lay-verify="required">
                    <option value="-1" disabled selected>==请选择==</option>
                    <option value="软件工程">软件工程</option>
                    <option value="网络工程">网络工程</option>
                    <option value="信息工程">信息工程</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="update-stu-form-submit">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="../js/layui/layui.js" charset="utf-8"></script>


<script>
    layui.use(['jquery', 'table', 'layer', 'form'], function(){
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        table.render({
            elem: '#stu-table'
            ,id:'stu-table-id'//重载需要
            ,url:'stu/select'
            ,cellMinWidth: 80
            ,cols: [[
                {type:'numbers'}
                ,{field:'name', title: '姓名'}
                ,{field:'age', title: '年龄', sort: true}
                ,{field:'sex', title: '性别',templet: function (d) {
                        if (d.sex==0) return "女";
                        else if (d.sex==1) return "男";
                    }
                }
                ,{field:'major', title: '专业'}
                ,{toolbar:"#stu-toolbar",title:"操作"}
            ]]
        });
        //搜索操作
        form.on('submit(search-stu-submit)',function (data) {
            table.reload('stu-table-id',{
                where:{"name":data.field.stu_name}
                ,page:{
                    curr:1
                }
            });
            return false;
        });
        //表操作
        table.on('tool(stu-table)',function (obj) {
            var data=obj.data;
            var event=obj.event;
            //删除
            if(event ==='del'){
                layer.confirm('确认删除该学生吗？',function (index) {
                    $.ajax({
                       url:"/stu/del/"+data.UUID
                        ,type:"GET"
                        ,dataType:"json"
                        ,success:function (data) {
                            if(data.status==1){
                                layer.msg("删除成功");
                                table.reload("stu-table-id");
                            }else{
                                layer.msg("删除失败");
                            }
                        }
                        ,error:function () {
                            console.log("ajax error");
                        }
                    });
                    layer.close(index);
                });
            }else if(event==='edit'){
                form.val('update-stu-form', {
                    "UUID":data.UUID,
                    "name": data.name,
                    "age": data.age,
                    "sex": data.sex,
                    "major": data.major
                });
                layer.open({
                    type:1
                    ,title:"编辑学生"
                    ,skin:'layui-layer-molv'
                    ,area:['500px'],
                    content:$('#update-stu-layer')
                });
            }
        });
        //编辑操作
        form.on('submit(update-stu-form-submit)',function(data){
            $.ajax({
                url:"/stu/update"
                ,type:"POST"
                ,contentType: 'application/json'
                ,data:JSON.stringify(data.field)
                ,success:function (data) {
                    if(data.status==1){
                        layer.close(layer.index);
                        layer.msg('编辑成功');
                        table.reload('stu-table-id');
                    }
                }
                ,error:function () {
                    console.log("ajax error");
                }
            });
            return false;
        });
        //添加学生
        $('#add').click(function () {
            $('#add-stu-form')[0].reset();
            layer.open({
               type:1
               ,title:"添加学生"
                ,skin:'layui-layer-molv'
                ,area:['500px'],
                content:$('#add-stu-layer')
            });
        });
        //添加操作
        form.on('submit(add-stu-form-submit)',function(data){
            $.ajax({
               url:"/stu/add"
               ,type:"POST"
               ,contentType: 'application/json'
               ,data:JSON.stringify(data.field)
               ,success:function (data) {
                   if(data.status==1){
                       layer.close(layer.index);
                       layer.msg('添加成功');
                       table.reload('stu-table-id');
                   }
               }
               ,error:function () {
                    console.log("ajax error");
                }
            });
            return false;
        });
    });
</script>

</body>
</html>